<template>
  <div  class="home_con">
    <header class="header_mi">
      <h3>实时车辆迁徙</h3>
    </header>
    <div id="showMigration" style="height:90vh">

    </div>
  </div>
</template>

<script>
  import "../assets/css/app.css";
  export default {
    name: "MigrationShow",
    data() {
      return {
        geoCoordMap: {},
        GZData: []
      }
    },
    mounted() {
      // 刷新后首次调用
      this.getBaseCityLola()
      // //动态显示时间
      setInterval(this.getCurrentTime, 1000)
    },
    methods: {
      // 当前时间
      getCurrentTime() {
        var strs = this.initTime();
        var data = new Date();
        var list_date = strs.split("-");
        var month = list_date[0]
        var date = list_date[1]
        var hour = list_date[2]
        var minute = list_date[3]
        var second = list_date[4]
        this.curretTime = data.getFullYear() + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
        // 调用car分时数据方法(minute == '00' || minute == '30') && second == '00'
        // second == '00'
        /**
         * (minute == '00' || minute == '10'|| minute == '20'|| minute == '30'|| minute == '40'
         || minute == '50') &&
         */
        if ( (minute == '05' || minute == '15'|| minute == '25'|| minute == '35'|| minute == '45'
          || minute == '55') && second == '00') {
          var ymd = data.getFullYear() + "-" + month + "-" + date;
          var timeMark = hour + '' + minute + '' + second + '';
          // console.log(this.geoCoordMap.length,"prev")
          this.geoCoordMap = {}
          this.GZData=[]
          // console.log(this.geoCoordMap.length,"after")
          // 同步数据
          // this.synchronizeData(ymd, timeMark);
          this.getBaseCityLola(ymd,timeMark);
        }
      },


      // 同步数据
      synchronizeData(ymd,timeMark){
        let api = this.Global.baseUrl + "/synchronizeData/"+ymd+"/"+timeMark
        // let api = this.Global.baseUrl+"/migrationAll/"+ymd+"/"+timeMark
        this.$axios.get(api).then(res=>{
          // console.log(res.data)
          this.getBaseCityLola(ymd,timeMark);
        }).catch(err=>{})
      },

      initTime() {
        var data = new Date();
        var month = data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
        var date = data.getDate() <= 9 ? "0" + data.getDate() : data.getDate();
        var hour = data.getHours() <= 9 ? "0" + data.getHours() : data.getHours();
        var minute = data.getMinutes() <= 9 ? "0" + data.getMinutes() : data.getMinutes();
        var second = data.getSeconds() <= 9 ? "0" + data.getSeconds() : data.getSeconds();

        return month + "-" + date + "-" + hour + "-" + minute + "-" + second
      },
      // 获取基本数据
      getBaseCityLola(ymd,timeMark) {
        let y = ymd
        let t = timeMark
        if(ymd == undefined){
          let strs =this.initTime();
          let data = new Date();
          let list_date = strs.split("-");
          let month = list_date[0]
          let date = list_date[1]
          let hour = list_date[2];
          let minute = list_date[3]
          let second = list_date[4]
          y = data.getFullYear() + "-" + month + "-" + date;
          t = hour+'' + minute + '' + second+'';
        }
        let api = this.Global.baseUrl + "/migrationAll/"+y+"/"+t
        // let api = this.Global.baseUrl+"/migrationAll/"+ymd+"/"+timeMark
        this.$axios.get(api).then(res => {
          let str = '{'
          let tempNum = res.data.length - 1
          for (let i = 0; i < res.data.length; i++) {
            let key = res.data[i].value1
            let value = []
            value.push(parseFloat(res.data[i].value2))
            value.push(parseFloat(res.data[i].value3))
            this.geoCoordMap[key] = value
          }
          this.getTwoCityInfo(ymd,timeMark);
          // console.log(typeof this.geoCoordMap)
          // if(i == tempNum){
          //   str = str + "'"+res.data[i].value1+"'"+":"+"["+res.data[i].value2+","+res.data[i].value3+"]"
          // }else{
          //   str = str + "'"+res.data[i].value1+"'"+":"+"["+res.data[i].value2+","+res.data[i].value3+"]"+","
          // }
          // str = str + "}"

          // let obj = eval('('+str+')');
          // // 获取转换后的对象
          // let entry = Object.entries(obj);
          // this.geoCoordMap = entry
          // console.log(entry)
        }).catch(err => {

        })
      },

      getTwoCityInfo(ymd,timeMark) {
        let y = ymd
        let t = timeMark
        if(ymd == undefined){
          let strs =this.initTime();
          let data = new Date();
          let list_date = strs.split("-");
          let month = list_date[0]
          let date = list_date[1]
          let hour = list_date[2];
          let minute = list_date[3]
          let second = list_date[4]
          y = data.getFullYear() + "-" + month + "-" + date;
          t = hour+'' + minute + '' + second+'';
        }
        // let api = this.Global.baseUrl + "/migrationCity/2021-02-02/165200"
        let api = this.Global.baseUrl+"/migrationCity/"+y+"/"+t
        this.$axios.get(api).then(res => {
          for (let i = 0; i < res.data.length; i++) {
            let tempList = []
            let tempList2 = {}
            let temp = {}
            temp['name'] = res.data[i].value1
            let temp2 = {}
            tempList2['name'] = res.data[i].value2
            temp2 = [res.data[i].value1,[temp,tempList2]]
            tempList.push(temp)
            tempList.push(temp2)
            // console.log(tempList,'tempList')
            this.GZData.push(tempList)
          }
          this.drawMigration()
          //
          // console.log(this.GZData)
        }).catch(err => {

        })
      },

      drawMigration() {
        const self = this
        // 基于准备好的dom，初始化echarts图表
        var myChart = this.$echarts.init(document.getElementById('showMigration'));

        var planePath = 'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705';

        var convertData = function (data) {
          var res = [];
          var fromCoord = self.geoCoordMap[data[1][0].name];
          var toCoord = self.geoCoordMap[data[1][1].name];
          if (fromCoord && toCoord) {
            res.push([{
              coord: fromCoord
            }, {
              coord: toCoord
            }]);
          }
          return res
        };

        var color = ['#3ed4ff', '#ffa022', '#a6c84c'];
        var series = [];
        this.GZData.forEach(function (item, i) {
          series.push({
              type: 'lines',
              zlevel: 1,
              effect: {
                show: true,
                period: 6,
                trailLength: 0.7,
                color: color[1],
                symbolSize: 3
              },
              lineStyle: {
                normal: {
                  color: color[2],
                  width: 0,
                  curveness: 0.2
                }
              },
              data: convertData(item[1])
            }
          );
        });

        let option = {
          // backgroundColor: '#080a20',
          // title: {
          //   text: '车辆迁徙',
          //   subtext: '实时数据展示',
          //   left: 'center',
          //   textStyle: {
          //     color: '#fff'
          //   }
          // },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            top: 'bottom',
            left: 'right',
            data: ['北京 Top10', '上海 Top10', '广州 Top10'],
            textStyle: {
              color: '#fff'
            },
            selectedMode: 'single'
          },
          geo: {
            map: 'china',
            label: {
              emphasis: {
                show: false
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#132937',
                borderColor: '#0692a4'
              },
              emphasis: {
                areaColor: '#0b1c2d'
              }
            }
          },
          series: series
        };
        // 为echarts对象加载数据
        myChart.setOption(option);

      }
    }
  }
</script>

<style scoped>

</style>
